<template>
  <div
    id="app
  "
  >
    <ul id="a">
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="arr.push(20)">点击</button>
    <button @click="del">销毁</button>
    <hr />
    <leftVue v-if="isAll" />
    <button @click="isAll = false">销毁</button>
  </div>
</template>
<script>
import leftVue from "./components/left.vue"
// 每个.vue文件-都是一个小的Vue实例（都有自己的一套方法）
export default {
  components: {
    leftVue
  },
  data () {
    return {
      name: '小花',
      arr: [1, 2, 3, 5],
      isAll: true
    }
  },
  // 初始化之前
  beforeCreate () {//实例话创建之前

    console.log('初始化前')//可以打印，但是一般都不在这里打印而是在.vue组件
    console.log(this.name)//undefined
  },
  // 初始化之后
  created () {
    console.log('初始化后')
    console.log(this.name)//可以访问
    // created里才能访问data里定义变量
    // 场景：网页钢带铠需要进行网络请求时，把axios请求代码写在这个函数内
  },
  // 挂载之前
  beforeMount () {
    console.log('beforeMount--真实DOM挂在之前--编译好模板（虚拟DOM')
    console.log(document.querySelectorAll('#a>li')[1])//undefined
  },
  // 挂载之后
  mounted () {
    console.log('mounted--真实DOM挂在之后--虚拟DOM替换el根标签位置了')
    console.log(document.querySelectorAll('#a>li')[1])//打印标签
    // 当我要获取真实的DOM是，一定要写在mounted里写
  },
  // 更新之前
  beforeUpdate () {
    console.log('beforeUpdate--真实DOM更新之前')
    console.log(document.querySelectorAll('#a>li')[4])//undefined
  },
  // 更新以后（前提-数据改变才会触发更新阶段的钩子函数）
  updated () {
    console.log('updated--真实DOM更新之后')
    console.log(document.querySelectorAll('#a>li')[4])
    // 获取到更新后的真实DOM（偶尔使用）
  },
  // 销毁之前（前提是当前组件实例调用$destroy()方法，或者当前组件v-if从DOM树上被移除）
  beforeDestroy () {
    console.log('beforeDestroy--销毁之前')

  },
  // 销毁之后
  destroyed () {
    console.log('destroyed---销毁之后')
    // 场景：消除磁组件占用的计时器/定时器/全局事件
  },
  methods: {
    del () {
      this.$destroy()//此时此刻我上面的销毁的函数，已经销毁了，为什么页面还是可以看到，因为页面时js
    }
  }
}
</script>
<style>
</style>